<template>
  <div class="main">
    <div style="display: flex; justify-content: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/Shop">热门商店</el-menu-item>
        <el-menu-item index="/MyCollect">我的收藏</el-menu-item>
        <el-menu-item index="/ShoppingCart">购物车</el-menu-item>
        <el-menu-item index="/OrderCenter">订单中心</el-menu-item>
      </el-menu>
    </div>
    <br>
    <el-card class="order-card">
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="id" label="订单编号"></el-table-column>
        <el-table-column prop="productName" label="商品"></el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="warning">待发货</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<script>
import { queryOrderByPage } from "@/api/request/ShopRequest";

export default {
  name: "OrderCenter",
  data() {
    return {
      activeIndex: '/OrderCenter',
      queryParams: {
        page: 0,
        size: 10,
        userId: null
      },
      userInfo: {},
      orderList: []
    }
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
    getList() {
      if(!this.userInfo){
        this.$message.error('登录账号才可查看')
        return
      }

      this.queryParams.userId = this.userInfo.id
      queryOrderByPage(this.queryParams).then(res => {
        this.orderList = res.content;
      })
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleString();
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('xm-user'))
    this.getList()
  }
}
</script>


<style lang="scss" scoped>
.main {
  padding-top: 93px;
}

.order-card {
  max-width: 800px;
  margin: 200px auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
